<style lang="scss">

</style>
<template>
  <div>
    <el-dialog
      title="员工选择"
      :visible.sync="vesivleOpen"
      width="50%" :close-on-click-modal="false" :z-index="100"
      @close="close"
    >
      <el-form
        ref="reference" class="form-horizontal j-forms" :model="referenceObj"
        label-width="80px"
      >
        <div class="row form-group form-group-sm">
          <el-form-item label="姓名" prop="agentName" class="col-md-4">
            <el-input
              v-model="referenceObj.agentName"
              style="width: 67%;" label-width="230px"
              title="姓名"
            />
          </el-form-item>
          <el-form-item label="编号" prop="agentCode" class="col-md-4">
            <el-input
              v-model="referenceObj.agentCode"
              style="width: 67%;" label-width="230px"
              title="编号"
            />
          </el-form-item>
          <el-form-item label="管理机构" prop="agencyCode" class="col-md-4">
            <el-select
              v-model="referenceObj.agencyCode"
              class="col-md-12" clearable
              placeholder="请选择" filterable
            >
              <el-option
                v-for="item in orgOption" :key="item.code" :label="(item.code + '-' +item.name)"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="职级" prop="personnelRankCode" class="col-md-4">
            <el-select
              v-model="referenceObj.personnelRankCode"
              class="col-md-12" clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in rankOptions" :key="item.code" :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="row form-group col-md-12" style="text-align : center;">
        <rich-button
          :plain="true" type="info" shape="capsule"
          class="el-icon-search" @click="searchQuery"
        >
          查询
        </rich-button>
        <rich-button shape="capsule" class="el-icon-quit" @click="reset">
          重置
        </rich-button>
      </div>
      <div>
        <el-table
          ref="referenceTable"
          :data="rows" highlight-current-row
        >
          <el-table-column prop="agentCode" label="业务员代码" />
          <el-table-column prop="agentName" label="业务员姓名" />
          <el-table-column prop="agencyName" label="管理机构名称">
            <!-- <template slot-scope="scope">
							{{ scope.row.c_blacklist_flag + '我是' }}
						</template> -->
          </el-table-column>
          <el-table-column prop="personnelRankName" label="职级名称" width="130" />
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-button
                type="text" size="small"
                @click="selectReference(scope.row)"
              >
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right;" :current-page="pageNo" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { getRecommendListApi, getStaffListApi } from './api/reference-modal';
import { getOrgListByCodeApi, getDictOptionsApi } from '@/modules/index/src/common/common-api';
import { getOper } from '@/modules/index/src/common/tools';
import { get, post } from '@/utils/https';
export default {
  components: {

  },
  // mixins: [emitter],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
		referenceModalObj: {
			type: Object,
			default: () => {
				return {
					parentCode: '',
					type: 'staff'
				};
      }
		}
  },
  data() {
    return {
      vesivleOpen: false,
			orgOption: [],
			rankOptions: [], // 职级
      pageNo: 1,
      pageSize: 10,
      total: 0,
      referenceObj: {
        agentName: '',
        agentCode: '',
        agencyCode: '',
        personnelRankName: '',
				parentCode: '',
				crAgencyCode: getOper().c_login_dept_code,
      }, // 查询条件
      rows: [{
      }],
      checkRow: null, // 单击选中的行
      selectIdxs: [],
      agentPackageList: [
        '华泰'
      ],
      staffVisible: false
    };
  },
	computed: {
		apitype() {
			return this.referenceModalObj.type;
		},
		code() {
			return this.referenceModalObj.parentCode;
		}
	},
  watch: {
    visible: {
      handler(newval, oldval) {
        this.vesivleOpen = newval;
      },
      immediate: true
    },
		apitype: {
			handler(newval) {
				// console.log('监听', newval);
				this.query();
      },
      immediate: true,
			deep: true,
		},
		code: {
			handler(newval, oldval) {
				this.referenceObj.parentCode = newval;
				// 推荐人的时候，管理机构查询的是父机构下面的所有子机构
        if (this.apitype === 'recommend') {
					post(
						PERFORM_URL + '/dict/constant',
					{
						type: 'subsidiaryCompany',
						parentCode: newval
					},
						res => {
							this.orgOption = res.data;
						},
						err => {
							Message.error({ message: err.message, duration: 2000 });
						}
					);
					this.query();
				} else {
					this.init();
				}
      },
      immediate: true,
			deep: true
		},
  },
  created() {
		this.init();
    // this.getparentMechanismData();
  },
  mounted() {

  },
  methods: {
		init() {
      this.getOptions();
			this.query();
    },
    getOptions() {
      Promise.all([
        getOrgListByCodeApi(getOper().c_login_dept_code), // 机构
        getDictOptionsApi('rank'), // 职级
      ]).then((res) => {
        this.orgOption = res[0].data; // 机构
        this.rankOptions = res[1].data; // 人员职级
      });
    },
    handleSizeChange: function(val) {
      this.pageSize = val;
      this.query();
    },
    handleCurrentChange: function(val) { // 分页查询
      this.pageNo = val;
      this.query();
    },
    // 点击查询按钮方法
    searchQuery() {
      this.query();
    },
    // 重置方法
    reset() {
      this.checkRow = null;// 清空单击选中的行的数据
      this.$refs.reference.resetFields();
      this.$refs.referenceTable.setCurrentRow();// 取消高亮的行
			this.pageNo = 1;
			this.query();
    },
    // 查询方法
    async query() {
			this.checkRow = null;// 每次查询时清空单击选中的行的数据
			let res;
			// 推荐人
			if (this.apitype === 'recommend') {
				// this.referenceObj.agencyCode = this.code;
				res = await getRecommendListApi({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					personnelStatus: '1', // 在职
					...this.referenceObj
				});
			} else { // 员工
				res = await getStaffListApi({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					personnelStatus: '1', // 在职
					...this.referenceObj
				});
			}
      this.rows = res.data.records;
      this.total = res.data.total;
      // Message.success('查询成功');
    },

    // 选择
    seeRow(row) {
      this.$emit('getCode', row);
      // this.$router.push({ name: 'solesAgencyManageInfo', params: { status: 'see', seeInfo: row }});
    },
    close() {
      this.$emit('close', false);
    },
    selectReference(row) {
      this.$emit('getCode', row);
      this.close();
    }
  }
};
</script>
<style>
.el-input,.el-select {
	width: 100% !important;
	padding: 0 !important;
}
</style>
